<template>
  <a-drawer :title="`货箱`" width="100%" :visible="visible"
            hide-cancel
            @cancel="visible = false"
            :footer="false"
            v-if="visible">
    <ma-crud ref="crudRef" :columns="columns" :options="shipmentOptions" :scrollbar="true" class="waybill-list">
      <template #number="{ record }">
        <p color="blue" @click="">{{ record.parcel.number }}</p>
        <div class="overflow-hidden text-xs line-clamp-2">
          <p>{{record.parcel.ext_number}}</p>
          <a-link status="danger" v-if="record.work_order">
            <template #icon>
              <icon-stop/>
            </template>
            存疑
          </a-link>
          <a-link status="danger" v-if="record.work_order && record.work_order.intercept == 1">
            <template #icon>
              <icon-stop/>
            </template>
            拦截
          </a-link>
        </div>
      </template>
    </ma-crud>
  </a-drawer>
</template>
<script setup>

import {computed, inject, ref,reactive,h} from "vue";
import parcel from "@/api/document/parcel.js";
import waybill from "@/api/document/waybill.js";
import dictHelp from "@/utils/dicthelp.js";
const crudRef = ref()
const record = ref({})
const visible = ref(false)
const config = inject('config')
let shipmentOptions = ref({})
const formData = ref({
  page:1,
  pageSize:10,
  data:[],
  request:false,
  end:false
})
const onShow = async (data) => {
  record.value = data
  visible.value = true
  formData.value.page = 1
  formData.value.end = false
  formData.value.data = []
  shipmentOptions = {
    rowSelection: undefined,
      showTools: false,
      tabs:{
        dataIndex:'cancel',
        type: 'rounded',
        size:'mini',
        onClick: (value) => {
          formData.value.page = 1
          formData.value.data = []
          formData.value.end = false
        },
      },
      // tablePagination:{style:{display:"none"}},
      pk: 'id',
      size:"mini",
      // 默认统一设置列宽度
      columnWidth: 0,
      bordered: { wrapper: true, cell: false },
      stripe: false,
      scroll: { x: '0', y: config.value.height -75 +'px' },
      pk: 'id',
      api: parcel.getWaybillList,
      requestParams: {
          parcel:1,
         waybill_id: record.value.id,
      },
      beforeSearch: (requestParams) => {
        formData.value.page = 1
        formData.value.end = false
        formData.value.data = []
        return requestParams
      },
      beforeRequest: (requestParams) => {
        requestParams.page = formData.value.page
        requestParams.refresh_tabs = 0
        return requestParams
      },
      afterRequest: (tableData) => {
        formData.value.data = formData.value.data.concat(tableData)
        // console.log(formData.value.data)
        if(tableData.length < formData.value.pageSize){
          formData.value.request = false
          formData.value.end = true
          return formData.value.data
        }
        // 获取你想要添加滚动事件的元素
        var scrollableElement = document.getElementsByClassName('arco-scrollbar-container')[2];
        // 使用 addEventListener 添加滚动事件监听器
        scrollableElement.addEventListener('scroll', function(event) {
          if(event.target.scrollTop > event.target.scrollHeight - config.value.height + 75){
            if(formData.value.request || formData.value.end){
              return;
            }
            formData.value.request = true
            formData.value.page = formData.value.page + 1
            crudRef.value.requestData()
          }
        });
        formData.value.request = false
        return formData.value.data
      },
    }
}

const columns = reactive([
  {
      title: "箱号",
      dataIndex: "number",
      formType: "input",
      // search: true,
  },
  {
      title: "重量/尺寸",
      dataIndex: "parcel.actual_weight_size",
      formType: "input",
      customRender: ({record}) => {
          return record.parcel ? h('div', [
              h('span', record.parcel.actual_weight + 'KG'),
              h('br'),
              h('span', record.parcel.actual_length + '*' + record.parcel.actual_width + '*' + record.parcel.actual_height),
          ]) : '';
      },
  },
  {
      title: "计划提单",
      dataIndex: "waybill_id",
      customRender: ({record}) => {
          return record ? ( [3,5].includes(record.cancel) ? record.waybill_id : record.out_waybill_id):'';
      },
  },
  {
      title: "发出提单",
      dataIndex: "out_waybill_id",
      customRender: ({record}) => {
        return record ? ( record.cancel == 4 ? record.waybill_id : record.out_waybill_id):'';
      },
  },
  {
        title: "状态",
        dataIndex: "cancel",
        formType: "select",
        dict: {
            data:[
              {label:'计划装箱(未扫码)',value:0},
              {label:'已装箱(已扫码)',value:2},
              {label:'计划外装箱',value:4},
              {label:'封箱未装箱',value:3},
              {label:'封箱已装箱',value:5},
              {label:'已取消',value:1},
            ],
            translation: true
        },
        hide:true,
        search:true,
    },
])

defineExpose({onShow})
</script>